<template>
	<view style="height: 100%">
		<!-- components/bottom_slide/bottom_slide.wxml -->
		<view class="mask_shai" @tap="hidePop" :style="'display:' + (slide ? 'block' : 'none')"></view>
		<view class="shai_pop" :style="(slide ? 'transform:translateY(0)' : 'transform:translateY(100%)') + ' '">
			<view class="shai_box">
				<view class="dl">
					<view class="dt">位置</view>
					<view :class="'dd ' + (openSlide ? 'open' : '')">
						<view class="area fn-clear ul">
							<view :class="'li ' + (item.selected && item.selected == true ? 'on_chose' : '')"
								:data-prarm="item.id" data-name="distance" @tap="intoParam"
								v-for="(item, index) in disList" :key="index">
								{{ index == 0 ? '附近' : '' }}{{ item.name }}
							</view>

							<view :class="'li ' + (item.selected && item.selected == true ? 'on_chose' : '')"
								:data-prarm="item.id" data-name="addrid" @tap="intoParam"
								v-for="(item, index) in cityList" :key="index">
								{{ item.typename }}
							</view>
						</view>
						<view class="open_btn a" @tap="openDl">
							<view class="arr_b">
								<image :src="imgPath + '/info/d_arr.png?v=' + imgVersion"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="dl">
					<view class="dt">保障</view>
					<view class="dd">
						<view class="ul">
							<view :class="'li ' + (item.selected && item.selected == true ? 'on_chose' : '')"
								:data-prarm="item.id" data-name="nature" @tap="intoParam"
								v-for="(item, index) in natureList" :key="index">
								{{ item.name }}
							</view>
							<!-- <view class="li" data-prarm="1" data-name="nature">实名认证</view> -->
						</view>
					</view>
				</view>
				<view class="dl" v-if="typelistClone.length">
					<view class="dt">类别</view>
					<view class="dd">
						<view class="ul">
							<view :class="'li ' + (item.selected && item.selected == true ? 'on_chose' : '')"
								:data-prarm="item.id" data-name="typeid" @tap="intoParam"
								v-for="(item, index) in typelistClone" :key="index">
								{{ item.typename }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="btnsGroup">
				<view class="reset_btn a" @tap="resetParam">重置</view>
				<view class="confirm_btn a" @tap="confirmParam">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	// components/bottom_slide/bottom_slide.js
	const app = getApp();
	var _this;
	export default {
		data() {
			return {
				imgPath: app.globalData.imgPath,
				imgVersion: app.globalData.imgVersion,
				cityList: [],
				openSlide: false,
				paramArr: [],
				clickSure: false,

				natureList: [{
						id: 2,
						name: '商家认证'
					},
					{
						id: 1,
						name: '实名认证'
					}
				],

				//认证
				disList: [{
						id: 1,
						name: '1km'
					},
					{
						id: 2,
						name: '2km'
					},
					{
						id: 5,
						name: '5km'
					},
					{
						id: 10,
						name: '10km'
					}
				],

				typelistClone: ''
			};
		},
		/**
		 * 组件的属性列表
		 */
		props: {
			slide: {
				type: Boolean,
				default: false
			},
			typelist: {
				type: Object,
				default: () => []
			}
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			// 隐藏弹窗
			hidePop: function() {
				if (!this.clickSure) {
					this.resetParam();
				}
				this.$emit('hideSlide');
			},

			// 获取城市
			getCityList() {
				var dataPrarm = 'service=info&action=addr&son=once&type=' + app.globalData.cityInfo.cityid;
				var urlData = app.encodeUrl(dataPrarm);
				this.$ajax.post({
					url: 'include/ajax.php?' + dataPrarm,
				}).then(res => {
					var data = res.data;
					_this.cityList = data.info;
				})
			},

			// 展开
			openDl() {
				_this.openSlide = !_this.openSlide
			},

			// 筛选字段
			intoParam(e) {
				var param = [];
				var el = e.currentTarget;
				var name = el.dataset.name;
				var value = el.dataset.prarm;
				var currNotName = ''; //addrid 或者  distance
				var addrid = [];
				var distance = [];
				var typeid = [];
				var nature = [];
				if (name == 'addrid' || name == 'distance') {
					if (name == 'addrid') {
						var currNotName = 'distance';
					} else {
						var currNotName = 'addrid';
					}
				}
				// 区域
				for (var i = 0; i < _this.cityList.length; i++) {
					if (name == 'distance' || name == 'addrid') {
						_this.cityList[i]['selected'] = false;
					}
					if (_this.cityList[i].id == value && currNotName != 'addrid' && currNotName == 'distance') {
						_this.cityList[i]['selected'] = true;
					}
					if (_this.cityList[i]['selected']) {
						addrid.push(_this.cityList[i].id);
					}
				}

				// 距离

				for (var i = 0; i < _this.disList.length; i++) {
					if (name == 'distance' || name == 'addrid') {
						_this.disList[i]['selected'] = false;
					}
					if (_this.disList[i].id == value && currNotName != 'distance' && currNotName == 'addrid') {
						_this.disList[i]['selected'] = true;
						for (var m = 0; m < _this.cityList.length; m++) {
							_this.cityList[m]['selected'] = false;
						}
					}
					if (_this.disList[i]['selected']) {
						distance.push(_this.disList[i].id);
					}
				}

				// 分类
				for (var i = 0; i < _this.typelist.length; i++) {
					if (name == 'typeid') {
						_this.typelist[i]['selected'] = false;
					}
					if (_this.typelist[i].id == value && name == 'typeid') {
						_this.typelist[i]['selected'] = true;
					}
					if (_this.typelist[i]['selected']) {
						typeid.push(_this.typelist[i].id);
					}
				}

				// 特色

				for (var i = 0; i < _this.natureList.length; i++) {
					if (name == 'nature') {
						_this.natureList[i]['selected'] = false;
					}
					if (_this.natureList[i].id == value && name == 'nature') {
						_this.natureList[i]['selected'] = true;
					}
					if (_this.natureList[i]['selected']) {
						nature.push(_this.natureList[i].id);
					}
				}


				_this.cityList = _this.cityList;
				_this.typelistClone = _this.typelist;
				_this.disList = _this.disList;
				_this.natureList = _this.natureList;
				if (distance.length) {
					param.push('distance=' + distance[0]);
				}
				if (addrid.length) {
					param.push('addrid=' + addrid.join(','));
				}
				if (typeid.length) {
					param.push('typeid=' + typeid.join(','));
				}
				if (nature.length) {
					param.push('nature=' + nature.join(','));
				}
				_this.paramArr = param
			},

			// 确认并且传参
			confirmParam() {
				var paramArr = _this.paramArr;
				_this.clickSure = true
				_this.$emit('getParam', {
					detail: paramArr
				});
			},

			// 重置参数
			resetParam() {
				_this.cityList = _this.setJsonArr(_this.cityList);
				_this.disList = _this.setJsonArr(_this.disList);
				_this.natureList = _this.setJsonArr(_this.natureList);
				_this.typelistClone = _this.setJsonArr(_this.typelist);
				_this.paramArr = []
			},

			// 重置数祖
			setJsonArr(jsonArr) {
				for (var i = 0; i < jsonArr.length; i++) {
					jsonArr[i]['selected'] = false;
				}
				return jsonArr;
			}
		},
		created: function() {},
		mounted() {
			_this = this;
			_this.getCityList();
		}
	};
</script>
<style>
	@import './bottom_slide.css';
</style>